<template>
  <div class="aside">
    <el-menu
        active-text-color="#409EFF"
        background-color="#304156"
        router
        text-color="#BFCBD9"
    >
      <el-scrollbar style="height: 100%">
        <div class="media">
          <el-avatar v-if="auth" :src="auth.avatar" class="avatar"/>
          <div class="media-body profile">
            <div v-if="auth" class="username">姓名：{{ auth.username }}</div>
            <div v-if="auth" class="rolename">职位：{{ auth.role.name }}</div>
          </div>
        </div>

        <el-submenu index="1">
          <template #title>
            <i class="el-icon-menu"/>
            <span>电子邮件</span>
          </template>
          <el-menu-item index="/edit-email">写邮件</el-menu-item>
          <el-menu-item index="/recieve-email">收件箱</el-menu-item>
          <el-menu-item index="/send">寄件箱</el-menu-item>
          <el-menu-item index="/sign">草稿箱</el-menu-item>
          <el-menu-item index="/sign">登录</el-menu-item>
          <el-menu-item index="/sign">密码修改</el-menu-item>
          <el-menu-item index="/sign-record">收件箱</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template #title>
            <i class="el-icon-menu"/>
            <span>考勤</span>
          </template>
          <el-menu-item index="/sign">签到签退</el-menu-item>
          <el-menu-item index="/sign-record">签到记录</el-menu-item>
          <el-menu-item v-if="auth && auth.role.id > 1" index="/sign-setting"
          >签到设置
          </el-menu-item
          >
          <el-menu-item index="/ask-leave">请假</el-menu-item>
          <el-menu-item v-if="auth && auth.role.id > 1" index="/check-leave"
          >审批请假
          </el-menu-item
          >
          <el-menu-item v-if="auth && auth.role.id > 1" index="/check-leave"
          >补签
          </el-menu-item
          >
        </el-submenu>

        <el-submenu index="3">
          <template #title>
            <i class="el-icon-folder"/>
            <span>文件</span>
          </template>
          <el-menu-item index="public-net-disk">公共文件</el-menu-item>
          <el-menu-item index="personal-net-disk">个人文件</el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template #title>
            <i class="el-icon-tickets"/>
            <span>通讯录</span>
          </template>
          <el-menu-item index="/personal-tele">个人通讯录</el-menu-item>
          <el-menu-item index="/depart-tele">内部通讯录</el-menu-item>
          <el-menu-item index="/public-tele">公共通讯录</el-menu-item>
        </el-submenu>

        <el-submenu index="5">
          <template #title>
            <i class="el-icon-tickets"/>
            <span>通知公告</span>
          </template>
          <el-menu-item index="/Notice">查看公告</el-menu-item>
          <!--          <el-menu-item index="/CheckNot">查看公告</el-menu-item>-->
          <!--          <el-menu-item index="/PublishNot">发布公告</el-menu-item>-->
          <!--          <el-menu-item index="/ManageNot">公告管理</el-menu-item>-->
        </el-submenu>

        <el-submenu index="6">
          <template #title>
            <i class="el-icon-user"/>
            <span>员工资料管理</span>
          </template>
          <el-menu-item index="/add-user">添加员工</el-menu-item>
          <el-menu-item index="/edit-user">管理员工</el-menu-item>
          <el-menu-item index="/add-post-transfer">申请调岗</el-menu-item>
          <el-menu-item index="/edit-post-transfer">调岗管理</el-menu-item>
          <el-menu-item index="/Jobs-manage">岗位管理</el-menu-item>

        </el-submenu>

        <!-- <el-submenu index="7">
          <template #title>
            <i class="el-icon-user" />
            <span>员工岗位调整</span>
          </template>
          <el-menu-item index="/add-post-transfer">申请调岗</el-menu-item>
          <el-menu-item index="/edit-post-transfer">调岗管理</el-menu-item>
        </el-submenu> -->

        <el-submenu index="8">
          <template #title>
            <i class="el-icon-tickets"/>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/sign">个人信息</el-menu-item>
          <el-menu-item index="/sign">用户管理</el-menu-item>
          <el-menu-item index="/sign">权限管理</el-menu-item>
        </el-submenu>
      </el-scrollbar>
    </el-menu>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "Aside",
  computed: mapState(["auth"]),
};
</script>

<style scoped>
.aside {
  height: 100%;
}

.avatar {
  margin: 20px 0 10px 20px;
}

.username {
  font-size: 12px;
  margin: 24px 0 5px 0;
  color: #bfcbd9;
}

.rolename {
  font-size: 12px;
  color: #bfcbd9;
}

.el-menu {
  height: 100%;
}
</style>